<!-- 仓库管理 -->
<template>
  <div class="app-container">
    <el-form
      class="globalSerchFormStyle"
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      label-position="right"
    >
      <el-row style="margin-top: 15px">
        <el-col :span="6">
          <el-form-item
            label="仓库名称"
            prop="stationId"
            clearable
            size="small"
          >
            <el-select
              v-model="queryParams.stationId"
              :clearable="true"
              filterable
              placeholder="请选择仓库名称"
              style="margin-left: 15px"
            >
              <el-option
                v-for="item in stationList"
                :key="item.stationId"
                :value="item.stationId"
                :label="item.stationName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="仓库编码"
            prop="stationCode"
            clearable
            size="small"
          >
            <el-input
              style="margin-left: 15px"
              v-model="queryParams.stationCode"
              placeholder="请输入仓库编码"
              clearable
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="status" clearable size="small">
            <el-select
              v-model="queryParams.status"
              :clearable="true"
              filterable
              placeholder="请选择状态"
              style="margin-left: 15px"
            >
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
          size="mini"
          >搜索</el-button
        >
      </el-col>
      <el-col style="padding-left: 10px" :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
          plain
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="onAdd"
          size="mini"
          >新增仓库</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-delete"
          size="mini"
          @click="onRemoveWarehouse"
          plain
          :disabled="!warehouseChange.length"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-download"
          @click="handleExport"
          size="mini"
          plain
          >导出</el-button
        ></el-col
      >
    </el-row>
    <el-table
      style="width: 100%"
      :data="warehouseList"
      v-loading="loading"
      header-align="left"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        label="仓库编码"
        align="left"
        prop="stationCode"
        width="180"
      />
      <el-table-column label="仓库名称" align="left" prop="stationName" />
      <el-table-column label="联系人" align="left" prop="leader" />
      <el-table-column label="电话" align="left" prop="phone" />
      <el-table-column label="地址" align="left" prop="detailRegionData" />
      <el-table-column label="状态" align="left" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status == "1" ? "启用" : "" }}
          {{ scope.row.status == "0" ? "禁用" : "" }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="left"
        class-name="small-padding fixed-width"
        width="90px"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="onEdit(scope.row)"
            >修改</el-button
          >
          <el-popconfirm
            title="确定删除该仓库吗？"
            @onConfirm="onRemove(scope.row)"
          >
            <el-button
              style="margin-left: 15px"
              slot="reference"
              size="mini"
              type="text"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="handleQuery"
    />
    <el-dialog
      center
      title="仓库信息"
      width="40%"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <el-form
        ref="formDialog"
        :rules="rulesDialog"
        :model="formDialog"
        label-width="80px"
        style="padding-right: 3%"
      >
        <el-form-item label="仓库编码" prop="stationCode">
          <el-input
            v-model="formDialog.stationCode"
            maxlength="50"
            disabled
            placeholder="仓库编码，系统自动生成"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓库名称" prop="stationName">
          <el-input
            v-model="formDialog.stationName"
            maxlength="50"
            placeholder="请输入仓库名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="leader">
          <el-input
            v-model="formDialog.leader"
            maxlength="50"
            placeholder="请输入联系人"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="formDialog.phone"
            maxlength="11"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="detailRegionData">
          <el-input
            v-model="formDialog.detailRegionData"
            maxlength="50"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" maxlength="200" prop="notes">
          <el-input
            v-model="formDialog.notes"
            placeholder="请输入备注"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            class="swich"
            v-model="formDialog.status"
            active-value="1"
            inactive-value="0"
            active-color="#409eff"
            inactive-color="#dcdfe6"
            active-text="启用"
            inactive-text="禁用"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="medium"
          >取 消</el-button
        >
        <el-button type="primary" @click="onConfirm" size="medium"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  repositoryList,
  repositoryAdd,
  repositoryExport,
  repositoryEelete,
  repositoryUpdate,
  getRepositoryApi,
} from "@/api/nonOil/class";
import { cloneDeep } from "lodash";
export default {
  name: "WarehouseManagement",
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        repositoryName: null,
        repositoryCode: null,
        status: null,
      },
      loading: false,
      total: 0,
      //表格数据
      warehouseList: [],
      // 选择的数据
      warehouseChange: [],
      //是否展示仓库弹窗
      dialogVisible: false,

      //弹框里面绑定的内容
      formDialog: {
        //仓库编码
        stationCode: null,
        //仓库名称
        stationName: null,
        //联系人
        leader: null,
        //联系电话
        phone: null,
        //地址
        detailRegionData: null,
        //备注
        notes: null,
        status: "1",
      },
      rulesDialog: {
        stationName: [
          { required: true, message: "请输入仓库名称", trigger: "blur" },
        ],
      },
      stationList: [],
    };
  },
  created() {
    this.handleQuery();
    this.getRepositoryList();
  },
  methods: {
    // 获取仓库名
    async getRepositoryList() {
      const res = await getRepositoryApi();
      if (res) {
        this.stationList = res;
      }
    },
    // 搜索
    handleQuery() {
      this.loading = true;
      repositoryList(this.queryParams)
        .then((res) => {
          this.total = res.total;
          this.warehouseList = res.rows;
          this.loading = false;
        })
        .catch(() => {
          this.total = 0;
          this.warehouseList = [];
          this.loading = false;
        });
    },

    // 重置
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.handleQuery();
    },

    // 新增仓库
    onAdd() {
      this.formDialog = {
        //仓库编码
        stationCode: null,
        //仓库名称
        stationName: null,
        //联系人
        leader: null,
        //联系电话
        phone: null,
        //地址
        detailRegionData: null,
        //备注
        notes: null,
        status: "1",
      };
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.formDialog.resetFields();
      });
    },

    // 批量删除仓库
    onRemoveWarehouse() {
      this.$confirm("此操作将永久删除该仓库, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let multipleSelection = [];
          multipleSelection = this.warehouseChange.map((item) => {
            return item.stationId;
          });

          repositoryEelete({ repositoryIds: multipleSelection.join() }).then(
            (res) => {
              this.handleQuery();
              this.$message({
                type: "success",
                message: res.msg,
              });
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return repositoryExport(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },

    // 修改仓库
    onEdit(row) {
      this.formDialog = cloneDeep(row);
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.formDialog.validate((valid) => {});
      });
    },

    // 删除单个仓库
    onRemove(val) {
      repositoryEelete({ repositoryIds: val.stationId }).then((res) => {
        this.handleQuery();
        this.$message({
          type: "success",
          message: res.msg,
        });
      });
    },

    // 选择操作
    handleSelectionChange(val) {
      this.warehouseChange = val;
    },

    // 新增或编辑仓库点击确定时
    onConfirm() {
      this.$refs.formDialog.validate((valid) => {
        if (valid) {
          if (this.formDialog.stationId) {
            repositoryUpdate(this.formDialog).then((res) => {
              if (res && res.code === 200) {
                this.$message.success("修改仓库成功！");
                this.dialogVisible = false;
                this.handleQuery();
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            repositoryAdd(this.formDialog).then((res) => {
              if (res && res.code === 200) {
                this.$message.success("新增仓库成功！");
                this.dialogVisible = false;
                this.handleQuery();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          console.log("error submit!!");
        }
      });
    },

    // 点击关闭
    handleClose(done) {
      done();
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
::v-deep .el-switch__label--left {
  z-index: 9;
  left: 20px;
}
::v-deep .el-switch__label--right {
  z-index: 9;
  left: -2px;
}
::v-deep .el-switch__label.is-active {
  display: block;
}

::v-deep .el-switch .el-switch__core,
::v-deep .el-switch .el-switch__label {
  width: 80px !important;
}

.app-container {
  .swich {
    ::v-deep.el-switch__core {
      height: 30px;
      border-radius: 12.5px;
    }
    ::v-deep .el-switch__core:after {
      top: 6px;
    }
    ::v-deep .el-switch__label * {
      position: absolute;
      right: 35px;
      top: 2px;
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>
